import { Space, Table, Tag, Input } from 'antd';
import {
  columns,
  leftColumns,
  letBottonColumn,
  positionObj,
  rightColumns,
  rightColumns2,
} from './index.config';
import { Map, Marker } from 'react-amap';
// json文件导入数据
import data2 from '@/node/Sheet2.json';
import data3 from '@/node/Sheet3.json';
import data4 from '@/node/Sheet4.json';
import data5 from '@/node/Sheet5.json';
import { Select } from 'antd';
import './index.less';
import { useEffect, useState } from 'react';
const index: any = (props: any) => {
  const [dataThree, setDataThree] = useState<any>([]);
  const [dataTwo, setDataTwo] = useState<any>([]);
  const [maker, setMaker] = useState('');
  const [value, setValue] = useState('');
  const ningdeCenter = [119.527, 26.659];
  // const getlat = (radius = 0.01) => {
  //   return ningdeCenter[1] + (Math.random() - 0.5) * 2 * radius;
  // };
  // const getlng = (radius = 0.01) => {
  //   return ningdeCenter[0] + (Math.random() - 0.5) * 2 * radius;
  // };
  useEffect(() => {
    let data = data3.map((val, index) => ({ ...val, key: index }));
    if (!maker) {
      setDataThree(data);
    } else {
      setDataThree(data.filter((val) => val.mwl == maker));
    }
  }, [maker]);
  useEffect(() => {
    if (!value) {
      setDataTwo(data2);
    } else {
      setDataTwo(data2.filter((val) => val.Monitoring == value));
    }
  }, [value]);
  const onChange = (value: string) => {
    console.log(`selected ${value}`);
    setValue(value);
  };
  return (
    <div className="aggre-situation">
      <div className="aggre-top">
        <div className="top-left">
          <div className="left-top-tab">
            <div className="tab-item">报警信息</div>
            <Table
              columns={leftColumns}
              dataSource={data4 || []}
              pagination={false}
            />
          </div>
          <div className="left-bottom-tab">
            <div className="tab-item">企业溯源概率</div>
            <Table
              columns={letBottonColumn}
              dataSource={
                data5
                  .filter((val) => val.computedName.indexOf('最大') < 0)
                  .map((val) => {
                    if (typeof val.probability === 'number') {
                      return {
                        ...val,
                        probability: `${val.probability * 100}%`,
                      };
                    } else {
                      return val;
                    }
                  }) || []
              }
              pagination={false}
              scroll={{ y: 164 }}
              summary={(props) => {
                console.log(props, 'props');
                const data = data5.filter((val) => {
                  return val.computedName.indexOf('最大') >= 0;
                });
                console.log(data, 'data');
                return (
                  <Table.Summary fixed>
                    {data?.map((val, index) => {
                      return (
                        <Table.Summary.Row>
                          <Table.Summary.Cell index={index}>
                            {val.computedName}
                          </Table.Summary.Cell>
                          <Table.Summary.Cell index={index}>
                            {val.probability}
                          </Table.Summary.Cell>
                        </Table.Summary.Row>
                      );
                    })}
                  </Table.Summary>
                );
              }}
            />
          </div>
        </div>
        <div className="top-middl">
          <Map
            amapkey={'1ff203e549d6d06f1ccd18fa454fe723'}
            // 地图的中心点位置（经纬度）
            center={ningdeCenter}
            // 展示区域-地图的放大倍数
            zoom={14}
            // 展示区域-左上角的经纬度
            showLabel={false}
            // 自定义图层
            // mapStyle="amap://styles/663285597f5c9074d4367032437f253d"
            // 官方图层
            // https://lbs.amap.com/api/javascript-api-v2/guide/map/map-style
            // 高德地图的样式链接
            mapStyle="amap://styles/grey"
            // 控制地图是否可以放大缩小
            zoomEnable={false}
            // 控制地图展示元素
            // features={['road', 'bg', 'building', 'point']}
            features={['road', 'bg', 'building']}
            events={{
              click: (e) => {
                setMaker('');
              },
            }}
          >
            {data3.map((val) => {
              console.log(data3.map((val) => val.mwl));
              return (
                <Marker
                  title={val.mwl}
                  label={{
                    // 设置文本标注偏移量
                    // offset: new AMap.Pixel(20, 20),
                    // 设置文本标注内容
                    content: `<div class='info'>${val.mwl}</div>`,
                    // 设置文本标注方位
                    direction: 'right',
                  }}
                  // 点的位置 - 经纬度
                  position={positionObj[val.mwl]}
                  // 点击事件
                  events={{
                    click: (e) => {
                      setMaker(val.mwl);
                    },
                  }}
                />
              );
            })}
          </Map>
        </div>
        <div className="top-right">
          <div className="tab-item">监测井数据</div>
          <Table
            columns={rightColumns}
            scroll={{ x: 900, y: 458 }}
            rowKey={(record) => record.mwl}
            dataSource={dataThree}
            pagination={false}
            // rowClassName={(record, index) => {
            //   return record.mwl === '井5' ? 'red-row' : '';
            // }}
            expandable={{
              expandedRowRender: (record) => {
                return (
                  <div className="expand-row">
                    {Object.keys(rightColumns2).map((val) => {
                      return (
                        <div key={val} className="expand-item">
                          <div className="title">{val}：</div>
                          <div className="text">
                            {record[rightColumns2[val]]}mg/L
                          </div>
                        </div>
                      );
                    })}
                  </div>
                );
              },
            }}
          />
        </div>
      </div>
      <div className="aggre-bottom">
        <div className="aggre-bottom-header">
          <div className="tab-item">实时监测数据</div>
          <div className="bottom-header-right">
            <Select
              showSearch
              placeholder="Select a person"
              allowClear
              onChange={onChange}
              filterOption={(input, option) =>
                (option?.value ?? '')
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              options={data2.map((val) => ({
                value: val.Monitoring,
                title: val.Monitoring,
              }))}
            />
          </div>
        </div>
        <div className="aggre-bottom-content">
          <Table
            columns={columns}
            dataSource={dataTwo || []}
            scroll={{ x: 2200, y: 282 }}
            pagination={false}
          />
        </div>
      </div>
    </div>
  );
};
export default index;
